<template>
  <div class="myContent" v-cloak>
    <div class="title">
      <div class="logo">
        <image class="pic" src="http://img11.360buyimg.com/n2/jfs/t18526/150/147061050/106652/15c8c620/5a603646N9f02d77f.jpg"></image>
      </div>
      <div class="logoText">
        <text class="company">{{name}}·{{adcd}}</text>
        <text class="company companys">北京创今世纪科技有限公司</text>
      </div>
    </div>
    <div class="list">
      <div class="listItem">
        <div class="listSon">
          <text class="bar-ic"  :style="{fontFamily: 'wxcIconFont'}">{{'\ue603'}}</text>
        </div>
        <text class="text">修改密码</text>
      </div>
      <div class="listItem">
        <div class="listSon">
          <text class="bar-ic"  :style="{fontFamily: 'wxcIconFont'}">{{'\ue748'}}</text>
        </div>
        <text class="text">日常事项</text>
      </div>
      <div class="listItem">
        <div class="listSon">
          <text class="bar-ic special"  :style="{fontFamily: 'wxcIconFont'}">{{'\ue616'}}</text>
        </div>
        <text class="text">登陆日志</text>
      </div>
    </div>
     <div class="demo">

      <wxc-cell :has-arrow="true"
                class="demoItem">
          <text class="image pwd" slot="label" :style="{fontFamily: 'wxcIconFont'}" >{{'\ue921'}}</text>
          <text class="red"
                slot="title">消息通知
          </text>
        </wxc-cell>

      <wxc-cell :has-arrow="true"
                class="demoItem">
          <text class="image day" slot="label" :style="{fontFamily: 'wxcIconFont'}" >{{'\ue6d0'}}</text>
          <text class="red"
                slot="title">天气预报
          </text>
        </wxc-cell>

      <wxc-cell :has-arrow="true"
                class="demoItem">
          <text class="image login" slot="label" :style="{fontFamily: 'wxcIconFont'}" >{{'\ue604'}}</text>
          <text class="red"
                slot="title">联系客户
          </text>
        </wxc-cell>
      <div class="btn">
        <wxc-button text="退出登录"
                  :btn-style="{ width: 600, marginTop: 80, backgroundColor: '#3EAFFC'}"
                  :text-style="{ color: 'white', fontSize: 34}" 
                  @wxcButtonClicked="onLogout"></wxc-button>
      </div>
    </div>
  </div>
</template>
<script>
import { WxcCell, WxcButton } from 'weex-ui';
import * as storage from '@/config/storageTypes'
import { removeCache, getCache } from '@/util/storageUtils'
var navigator = weex.requireModule('navigator')
var modal = weex.requireModule('modal')

export default {
  name: 'myContent',
  data () {
    return {
      name: '哈哈哈',
      adcd: '北京市'
    }
  },
  components: { WxcCell, WxcButton },
  methods: {
    onLogout () {
      this.$notice.loading.show()
      Object.values(storage).forEach(value => {
        removeCache(value)
      })
      this.$notice.loading.hide()
      this.$router.setHomePage('/pages/ctce/views/login.js')
    }
  },
  created () {
    getCache(storage.CTCE_USER_INFO).then(res => {
      const user = JSON.parse(res)
      this.name = user.ryxm
      this.adcd = user.xzqhmc
    })
  }
}
</script>
<style scoped>
.myContent{
  width: 750px;
  background-color: #f5f5f5;
}
.title{
  width: 750px;
  height: 235.4px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-left: 80px;
  padding-right: 80px;
}
.logo{
  width: 167px;
  height: 167px;
}
.pic{
  display:inline-block;
  width: 167px;
  height: 167px;
  border-radius: 100%;
  border-color: red;
  border-style: solid;
  border-width: 1px;
  text-align: center;
  line-height: 167px;
}
.logoText{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.company{
  font-size:29.1px;
  font-family:PingFangSC-Regular;
  color:rgba(0,0,0,1);
}
.companys{
  padding-top: 10px;
}
.list{
  width: 750px;
  height: 183.3px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-left: 30px;
  padding-right: 30px;
  background-color: #fff;
  margin-bottom: 20.8px;
}
.listItem{
  width: 230px;
  height: 183.3px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding-top: 25px;
  padding-bottom: 25px;
}
.listSon{
  width: 83.3px;
  height: 83.3px;
  border-radius: 50%;
  background-color:rgba(62,175,252,1);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.text{
  font-size:29.1px;
  font-family:PingFangSC-Regular;
  color:rgba(102,102,102,1);
}
.bar-ic{
  font-size: 65px;
  color: #fff;
}
.special{
  font-size: 55px;
}
.demo {
  width: 750px;
  background-color: #f2f3f4;
}
.demoItem{
  height: 100px;
  /* box-shadow: 0px -0.5px 1px 0px rgba(238,238,238,1), 0px 0.5px 1px 0px rgba(238,238,238,1); */
}
.red {
  font-size: 29.1px;
  font-family:PingFangSC-Regular;
  color:rgba(102,102,102,1);
  padding-top: 35px;
}
.image {
  font-size: 55px;
  margin-right: 20.8px;
}
.pwd{
  color:rgba(248,100,117,1);
}
.day{
  color: rgba(109,171,246,1);
}
.login{
  color: rgba(123,255,177,1);
}
.btn {
  align-items: center;
}
[v-cloak] {
  display: none;
}
</style>


